<template>
  <div class="cml-module">
    <cml-module
      icon="iconCarouse"
      moduleName="布局设置"
      :defaultOpen.sync="defaultOpen"
    >
      <ul class="cml-module-list">
        <li class="cml-module-item">
          <span class="cml-module-item-t">
            left:
          </span>
          <span>
            <a-input
              v-model="partSetting.style.left"
              size="small"
              @change="partSettingChange"
            />
          </span>
        </li>
        <li class="cml-module-item">
          <span class="cml-module-item-t">
            top:
          </span>
          <span>
            <a-input
              v-model="partSetting.style.top"
              size="small"
              @change="partSettingChange"
            />
          </span>
        </li>
        <li class="cml-module-item">
          <span class="cml-module-item-t">
            width:
          </span>
          <span>
            <a-input
              v-model="partSetting.style.width"
              size="small"
              @change="partSettingChange"
            />
          </span>
        </li>
        <li class="cml-module-item">
          <span class="cml-module-item-t">
            height:
          </span>
          <span>
            <a-input
              v-model="partSetting.style.height"
              size="small"
              @change="partSettingChange"
            />
          </span>
        </li>
        <!-- 如果需要--待重写 -->
        <!-- <li class="cml-module-item">
          <span class="cml-module-item-t">
            renderCompTag:
          </span>
          <span>
            <a-input
              v-model="renderCompTag"
              size="small"
              @change="partSettingChange('renderCompTag')"
            />
          </span>
        </li> -->
      </ul>
    </cml-module>
  </div>
</template>
<script>
import { Select, Input } from 'ant-design-vue'
import { mapMutations } from 'vuex'
import CmlModule from '@/assets/js/app/cmlpanel/components/cml-module'
import { truncate } from 'fs'

export default {
  components: {
    ASelect: Select,
    AInput: Input,
    CmlModule
  },
  model: {},
  props: {
    part: {
      type: Object
    }
  },
  data() {
    return {
      defaultOpen: false,
      renderCompTag: '',
      partSetting: {
        id: '',
        renderCompTag: '',
        style: {}
      },
      pid: ''
    }
  },
  computed: {},
  watch: {
    'part.style': {
      handler: function(v, v2) {
        this.setPartSetting()
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    app.partServer.getEventBus().$on('partMousedown', ([id, uid]) => {
      console.log(id, uid)
      if (this.partSetting.id != id) return
      this.defaultOpen = true
      this.pid = uid
    })
  },
  mounted() {},
  beforeDestroy() {},
  methods: {
    ...mapMutations('layout', ['changePart']),
    setPartSetting() {
      this.partSetting.id = this.part.id
      this.partSetting.style = { ...this.part.style }
      this.partSetting.renderCompTag = this.part.renderCompTag
    },
    partSettingChange(v) {
      this.changePart({
        name: this.$route.name,
        id: this.partSetting.id,
        part: this.partSetting
      })
      app.partServer
        .getEventBus()
        .$emit('partSetting', [this.partSetting, this.pid])
      console.log(v)
      if (v == 'renderCompTag') {
        app.partServer.getEventBus().$emit('renderCompTag', [v, this.pid])
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/css/panel-var.scss';
@import '@/assets/css/panel-mixin.scss';
</style>
